<template>
  <view class="page">
    <view class="login-back">
      <view class="title">
        <view>你好</view>
        <view>欢迎使用大圣查车</view>
      </view>
    </view>
    <view class="login-page">
      <view class="login-item">
        <view class="login-item-title">手机号</view>
        <view class="login-item-input"><input type="number" placeholder="请输入手机号" v-model="phone" /></view>
      </view>
      <view class="login-item">
        <view class="login-item-title">验证码</view>
        <view class="login-item-input">
          <input type="number" class="input" placeholder="请输入验证码" v-model="code" :maxlength="4" />
          <view v-if="!isCode" class="code" @click="sendCode()">发送验证码</view>
          <u-count-down v-else="isCode" class="code" ref="uCountDown" :timestamp="90" :show-days="false"
            :show-hours="false" color="#2b6cfc" @change="countDown" />
        </view>
      </view>

      <view class="login-btn btn" @click="phoneLogin()">登录</view>

      <!-- #ifdef MP-WEIXIN -->
      <view class="wechat-page">
        <view class="wechat-page-text">
          <text>------</text>
          <text>微信授权登录</text>
          <text>------</text>
        </view>
      
        <view class="wechat-page-icon" @click="wechatLogin">
          <image class="wechat-page-icon-img" src="../../static/img/wechat.svg"></image>
        </view>
      </view>
      <!-- #endif -->
    </view>

    <u-toast ref="uToast" />
    <u-modal ref="uModel" v-model="show" :content="content" @confirm="modelConfirm()" :show-cancel-button="true">
    </u-modal>
  </view>
</template>

<script>
  import {
    loginWechat,
    apiSendCode,
    loginPhone
  } from '@/api/user.js';
  export default {
    data() {
      return {
        // 是否发送验证码
        isCode: false,
        // 手机号
        phone: '',
        // 验证码
        code: '',
        content: '',
        show: false,
        weixinData: {}
      };
    },
    methods: {
      // 发送验证码
      sendCode() {
        console.log('1111111111');
        const {
          phone,
          isCode
        } = this;
        // 判断手机号是否为空
        if (!phone) {
          this.$refs.uToast.show({
            title: '手机号不能为空!',
            type: 'error',
            position: 'bottom'
          });
          return;
        }
        // 判断手机号是否正确
        if (!/^1[3456789]\d{9}$/.test(phone)) {
          this.$refs.uToast.show({
            title: '手机号格式不正确!',
            type: 'error',
            position: 'bottom'
          });
          return;
        }
        apiSendCode(this.phone)
          .then(res => {
            this.$refs.uToast.show({
              title: res.data.msg,
              type: 'success',
              position: 'bottom'
            });
            this.isCode = true;
            try {
              this.$refs.uCountDown.start();
            } catch (error) {}
          })
          .catch(err => {
            console.error(err);
            this.$refs.uToast.show({
              title: '发送失败,请重新发送!',
              type: 'success',
              position: 'bottom'
            });
          });
      },
      countDown(time) {
        if (time == 0) {
          this.isCode = false;
        }
      },
      // 手机号登录
      phoneLogin() {
        const {
          phone,
          code
        } = this;
        // 判断手机号是否为空
        if (!phone) {
          this.$refs.uToast.show({
            title: '手机号不能为空!',
            type: 'error',
            position: 'bottom'
          });
          return;
        }
        // 判断是否发送验证码
        if (!this.isCode) {
          this.$refs.uToast.show({
            title: '请先发送验证码!',
            type: 'error',
            position: 'bottom'
          });
          return;
        }

        // 判断验证码是否为空
        if (!code) {
          this.$refs.uToast.show({
            title: '验证码不能为空!',
            type: 'error',
            position: 'bottom'
          });
          return;
        }
        // 判断手机号是否正确
        if (!/^1[3456789]\d{9}$/.test(phone)) {
          this.$refs.uToast.show({
            title: '手机号格式不正确!',
            type: 'error',
            position: 'bottom'
          });
          return;
        }
        let data = {
          phone,
          code
        };
        loginPhone(data)
          .then(res => {
            if (res.data.code == 200) {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: 'success',
                position: 'bottom'
              });
              // 保存token到本地
              uni.setStorageSync('token', res.data.data.token);
              // 跳转到首页
              uni.switchTab({
                url: '/pages/index/index'
              });
            } else {
              this.$refs.uToast.show({
                title: res.data.msg,
                type: 'error',
                position: 'bottom'
              });
            }
          })
          .catch(err => {
            this.$refs.uToast.show({
              title: '登录失败!',
              type: 'error',
              position: 'bottom'
            });
          });
      },
      // 微信登录
      wechatLogin() {
        uni.login({
          provider: 'weixin',
          success: loginRes => {
            console.log(loginRes);
            uni.getUserInfo({
              success: res => {
                console.log(res);
                this.show = true;
                this.content = `确定使用${res.userInfo.nickName} 账号登录吗?`;

                this.weixinData = {
                  code: loginRes.code,
                  encryptedData: res.encryptedData,
                  iv: res.iv
                };
              }
            });
          }
        });
      },
      modelConfirm() {
        loginWechat(this.weixinData).then(resW => {
          if (resW.data.code == 200) {
            this.$refs.uToast.show({
              title: resW.data.msg,
              type: 'success',
              position: 'bottom'
            });
            // 保存token到本地
            uni.setStorageSync('token', resW.data.data.token);
            // 跳转到首页
            uni.switchTab({
              url: '/pages/index/index'
            });
          } else {
            this.$refs.uToast.show({
              title: resW.data.msg,
              type: 'error',
              position: 'bottom'
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  .login-back {
    background-image: url("data:image/svg+xml,%3Csvg width='750' height='420' viewBox='0 0 750 420' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0)'%3E %3Cpath d='M750 513C749.98 489.684 742.388 467.33 728.89 450.843C715.391 434.356 697.089 425.082 678 425.058H72C53.0128 425.115 34.8088 434.309 21.332 450.645C7.85528 466.982 0.191171 489.147 0 512.337V0H750V513Z' fill='url(%23paint0_linear)'/%3E %3Cg opacity='0.2'%3E %3Cpath opacity='0.9' d='M456.468 224.287C469.723 224.287 480.468 213.542 480.468 200.287C480.468 187.032 469.723 176.287 456.468 176.287C443.213 176.287 432.468 187.032 432.468 200.287C432.468 213.542 443.213 224.287 456.468 224.287Z' fill='white'/%3E %3Cpath opacity='0.9' d='M562.808 183.35L439.368 306.575C437.034 308.903 435.182 311.669 433.918 314.715C432.654 317.76 432.004 321.025 432.004 324.322C432.004 327.619 432.654 330.883 433.918 333.929C435.182 336.974 437.034 339.74 439.368 342.068V342.068C444.087 346.776 450.48 349.419 457.146 349.419C463.811 349.419 470.205 346.776 474.924 342.068L487.755 329.26C496.014 321.022 507.203 316.396 518.868 316.396C530.533 316.396 541.722 321.022 549.981 329.26L562.812 342.068C567.531 346.776 573.924 349.42 580.59 349.42C587.256 349.42 593.649 346.776 598.368 342.068V342.068C600.702 339.74 602.554 336.974 603.818 333.929C605.082 330.883 605.732 327.619 605.732 324.322C605.732 321.025 605.082 317.76 603.818 314.715C602.554 311.669 600.702 308.903 598.368 306.575L585.533 293.767C581.448 289.692 578.207 284.851 575.995 279.522C573.784 274.192 572.646 268.479 572.646 262.709C572.646 256.939 573.784 251.226 575.995 245.896C578.207 240.567 581.448 235.726 585.533 231.651L598.368 218.843C600.702 216.515 602.554 213.749 603.818 210.703C605.082 207.658 605.732 204.394 605.732 201.097C605.732 197.8 605.082 194.535 603.818 191.49C602.554 188.444 600.702 185.678 598.368 183.35V183.35C593.649 178.641 587.254 175.997 580.588 175.997C573.921 175.997 567.527 178.641 562.808 183.35V183.35Z' fill='white'/%3E %3Cpath opacity='0.9' d='M696 200.287C696 187.032 685.255 176.287 672 176.287C658.745 176.287 648 187.032 648 200.287V324.979C648 338.234 658.745 348.979 672 348.979C685.255 348.979 696 338.234 696 324.979V200.287Z' fill='white'/%3E %3C/g%3E %3C/g%3E %3Cdefs%3E %3ClinearGradient id='paint0_linear' x1='1.29819e-07' y1='393.984' x2='749.969' y2='387.405' gradientUnits='userSpaceOnUse'%3E %3Cstop stop-color='%231082FF'/%3E %3Cstop offset='1' stop-color='%2347AFFF'/%3E %3C/linearGradient%3E %3CclipPath id='clip0'%3E %3Crect width='749.998' height='420' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E ");
    height: 450rpx;
    background-size: 100%;
    color: #ffffff;
    font-size: 56rpx;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;
    padding: 40rpx 72rpx;
    width: 100%;
    z-index: -1;

    .title {
      margin-bottom: 70rpx;
    }
  }

  .login-page {
    background-color: #ffffff;
    border-radius: 72rpx 72rpx 0 0;
    min-height: 500rpx;
    transform: translateY(-100rpx);
    padding: 50rpx 72rpx;

    .login-item {
      margin-bottom: 50rpx;

      &-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }

      &-input {
        font-size: 28rpx;
        border-bottom: 2rpx solid #dedfe0;
        padding: 10rpx 0;
        display: flex;
        align-items: center;

        .input {
          flex: 1;
        }
      }

      .code {
        font-size: 28rpx;
        color: #2b6cfc;
        // position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        // right: 0;
      }
    }
  }

  .login-btn {
    height: 88rpx;
    background: #2989fd;
    box-shadow: 0rpx 8rpx 24rpx rgba(41, 137, 253, 0.2);
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100rpx;
  }

  .wechat-page {
    margin-top: 100rpx;

    &-text {
      display: flex;
      justify-content: center;
      color: #999999;

      text:nth-child(2) {
        margin: 0 20rpx;
      }
    }

    &-icon {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      border: 4rpx solid #cccccc66;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50rpx auto;

      &-img {
        width: 60rpx;
      }
    }
  }
</style>
